<template>
  <div style="width: 100%;height: 100%;">
    <div style="position: absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:400px;height: 200px;border-radius: 10px;">
      <el-form
        ref="form"
        :model="form"
        label-width="100px"
      >
        <el-form-item label="账号">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            show-password
            v-model="form.password"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="再次输入密码"
          v-show="!isShow"
        >
          <el-input
            show-password
            v-model="form.password2"
          ></el-input>
        </el-form-item>
        <div
          @click="btn"
          style="width;100%;height:20px"
          v-show="isShow"
        >
          <h6 style="position: absolute;right: 0;color:red">立即去注册</h6>
        </div>
        <div
          @click="btnLogin"
          style="width;100%;height:20px"
          v-show="!isShow"
        >
          <h6 style="position: absolute;right: 0;color:blue">立即去登录</h6>
        </div>
        <el-form-item v-show="isShow">
          <el-button
            type="primary"
            @click="onSubmit"
          >立即登录</el-button>
        </el-form-item>
        <el-form-item v-show="!isShow">
          <el-button
            type="danger"
            @click="onRegistered"
          >立即注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'addRoutes',
  data () {
    return {
      msg: '写在你这里',
      age: 23,
      obj: { name: '孙乔' },
      arr: [1, 2, 3]
    }
  },
  methods: {
    btn () {
      this.isShow = false
    },
    btnLogin () {
      this.isShow = true
    },
    onSubmit () { },
    onRegistered () {
      let param = {
        userName: this.form.userName,
        password: this.form.password
      }
      let that = this
      this.$http.post('/api/user/register', param).then(function (res) {
        console.log(res)
        that.$message({
          message: '注册成功!',
          type: 'success'
        })
        that.isShow = true
      })
    }
  }
}
</script>
